<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
  <link rel="stylesheet" href="./element/element.css" />
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
    }

    :root {
      --animate-delay: 0.4s;
    }

    * {
      margin: 0;
      padding: 0;
      color: aliceblue;
    }

    .outer {
      /* height: 100vh; */
      position: relative;
      width: 100vw;
      height: 100%;
      background-color: #020812;
      overflow: hidden;
      /* text-align: center; */
      /* display: flex;
        justify-content: center; */
    }

    .box {
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);

      overflow: hidden;
      display: flex;
      background-image: url('./assets/carbon/china-back.jpg');
      position: relative;
      background-repeat: no-repeat;
      background-size: contain;
      width: 1920px;
      height: 1080px;
      transform-origin: 0 0;

      transition: all 0.5s ease-out;
      /* height: 100%; */
      /* width: calc(100vh/1080*1920); */
    }

    @font-face {
      font-family: 'LED';
      src: url('./assets/font/LED.ttf');
    }

    @font-face {
      font-family: 'D-DIN';
      src: url('./assets/font/D-DIN-Bold.ttf');
    }

    @font-face {
      font-family: 'Alibaba PuHuiTi';
      src: url('./assets/font/Alibaba-PuHuiTi-Medium.ttf');
    }

    @font-face {
      font-family: 'PMZD';
      src: url('./assets/font/PMZD.ttf');
    }

    .action-button {
      position: absolute;
      right: 20px;
      top: 20px;
      z-index: 100;
    }

    .go-back {
      display: inline-block;
      width: 40px;
      height: 40px;
      cursor: pointer;
      background-size: 24px;
      background-repeat: no-repeat;
      background-position: 50%;
      background-image: url('./assets//three//返回.png');
    }

    .full-screen {
      display: inline-block;
      width: 40px;
      height: 40px;
      cursor: pointer;
      background-size: 24px;
      background-repeat: no-repeat;
      background-position: 50%;
      background-image: url('./assets//three//全屏.png');
    }

    [v-cloak] {
      display: none;
    }

    .left {
      width: 520px;
      /* height: 93.5%; */
      position: absolute;
      left: 0;
      bottom: 20px;
      top: 106px;
      margin-left: 20px;
      order: 1;
      /* transform-origin: 0 0; */
      /* background-image: url('./assets/one/one-left-img.png'); */
      background-repeat: no-repeat;
      /* animation-delay:0.5s */
      z-index: 999;
    }

    .left-container1 {
      width: 520px;
      height: 268px;
    }

    .left-top1 {
      width: 100%;
      height: 50px;
      background-image: url('./assets/carbon/left-top1.png');
      background-repeat: no-repeat;
    }

    .left-top2 {
      width: 100%;
      height: 50px;
      background-image: url('./assets/carbon/left-top2.png');
      background-repeat: no-repeat;
    }

    .left-top3 {
      width: 100%;
      height: 50px;
      background-image: url('./assets/carbon/left-top3.png');
      background-repeat: no-repeat;
    }

    .base-bottom {
      width: 100%;
      height: 218px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .base-content {
      width: 112px;
      height: 194px;
      background-image: url('./assets/carbon/base-back.png');
      background-repeat: no-repeat;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .base-bottom-text {
      font-family: 'Alibaba PuHuiTi';
      color: #ffffff87;
      font-size: 16px;
      margin-top: 35px;
    }

    .base-bottom-value {
      margin-top: 10px;
      display: flex;
      align-items: center;
    }

    .base-bottom-data {
      font-family: 'D-DIN';
      font-style: normal;
      font-weight: 700;
      font-size: 24px;
      line-height: 26px;
      text-align: center;
      text-transform: uppercase;
      color: #ffd500;
      text-shadow: 0px 3px 4px rgba(255, 183, 0, 0.5);
    }

    .base-bottom-unit {
      font-size: 13px;
      margin-left: 5px;
      font-weight: 500;
      color: #ccc5a3;
    }

    .base-bottom-icon1 {
      margin-top: 20px;
      width: 20px;
      height: 20px;
      background-image: url('./assets/carbon/icon1.png');
      background-repeat: no-repeat;
    }

    .base-bottom-icon2 {
      margin-top: 20px;
      width: 20px;
      height: 20px;
      background-image: url('./assets/carbon/icon2.png');
      background-repeat: no-repeat;
    }

    .base-bottom-icon3 {
      margin-top: 20px;
      width: 20px;
      height: 20px;
      background-image: url('./assets/carbon/icon3.png');
      background-repeat: no-repeat;
    }

    .base-bottom-icon4 {
      margin-top: 20px;
      width: 20px;
      height: 20px;
      background-image: url('./assets/carbon/icon4.png');
      background-repeat: no-repeat;
    }

    .left-container2 {
      width: 520px;
      height: 300px;
    }

    /* .carbon-pie {
      width: 520px;
      height: 232px;
    } */

    .carbon-stackBar {
      width: 520px;
      height: 250px;
    }

    .left-bottom2 {
      position: relative;
    }

    .left-bottom2-back {
      position: absolute;
      top: 12px;
      left: 76px;
      width: 211px;
      height: 211px;
      background-image: url('./assets/carbon/left-back2.png');
      background-repeat: no-repeat;
    }

    .left-bottom2-text {
      position: absolute;
      top: 107px;
      left: 160px;
      color: #b4c0cc;
      font-size: 14px;
    }

    .pie-data-color {
      position: absolute;
      top: 23px;
      right: 57px;
      display: flex;
      flex-direction: column;
      font-size: 16px;
      font-weight: 700;
      justify-content: space-between;
      height: 198px;
    }

    .left-container3 {
      margin-top: 18px;
      width: 520px;
      height: 360px;
    }

    .left-bottom3 {
      position: relative;
      width: 100%;
      height: 310px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'D-DIN';
    }

    .left-bottom3-text {
      font-family: 'Alibaba PuHuiTi';
      font-size: 14px;
      color: #b4c0cc;
      position: absolute;
      right: 5px;
      top: 10px;
    }

    .left-bottom3-back {
      width: 292px;
      height: 290px;
      background-image: url('./assets/carbon/left-back3.png');
      background-repeat: no-repeat;
    }

    .left-circle3 {
      width: 50px;
      height: 50px;
      background-image: url('./assets/carbon/left-circle3.png');
      background-repeat: no-repeat;
      font-size: 14px;
      line-height: 18px;
      text-align: center;
    }

    .left-circle4 {
      width: 37px;
      height: 37px;
      background-image: url('./assets/carbon/left-circle4.png');
      background-repeat: no-repeat;
      font-size: 14px;
      line-height: 18px;
      text-align: center;
    }

    .left-circle5 {
      width: 33px;
      height: 33px;
      background-image: url('./assets/carbon/left-circle5.png');
      background-repeat: no-repeat;
      font-size: 14px;
      line-height: 18px;
      text-align: center;
    }

    .left-circle-data {
      font-weight: 700;
      font-size: 28px;
    }

    .left-circle-data1 {
      font-weight: 700;
      font-size: 22px;
    }

    .left-bottom3-shihua {
      position: absolute;
      top: 81px;
      left: 189px;
      width: 145px;
      height: 148px;
      background-image: url('./assets/carbon/left-circle1.png');
      background-repeat: no-repeat;
      font-family: 'D-DIN';
      font-style: normal;
      font-size: 34px;
      line-height: 36px;
      text-align: center;
      color: #ffffff;
      z-index: 1;
    }

    .left-bottom3-dianli {
      position: absolute;
      top: 178px;
      left: 294px;
      width: 58px;
      height: 59px;
      background-image: url('./assets/carbon/left-circle2.png');
      background-repeat: no-repeat;
      font-family: 'D-DIN';
      font-style: normal;
      line-height: 20px;
      text-align: center;
      color: #ffffff;
      z-index: 2;
    }

    .left-bottom3-meitan {
      position: absolute;
      top: 168px;
      left: 154px;
      width: 58px;
      height: 59px;
      background-image: url('./assets/carbon/left-circle2.png');
      background-repeat: no-repeat;
      font-family: 'D-DIN';
      font-style: normal;
      font-size: 18px;
      line-height: 20px;
      text-align: center;
      color: #ffffff;
      z-index: 2;
    }

    .left-bottom3-jiancai {
      position: absolute;
      top: 46px;
      left: 228px;
      width: 58px;
      height: 59px;
      background-image: url('./assets/carbon/left-circle2.png');
      background-repeat: no-repeat;
      font-family: 'D-DIN';
      font-style: normal;
      font-size: 18px;
      line-height: 20px;
      text-align: center;
      color: #ffffff;
      z-index: 2;
    }

    .left-bottom3-gangtie {
      position: absolute;
      left: 87px;
      top: 120px;
    }

    .left-bottom3-jinshu {
      position: absolute;
      left: 145px;
      top: 60px;
    }

    .left-bottom3-shuini {
      position: absolute;
      top: 22px;
      left: 319px;
    }

    .left-bottom3-taoci {
      position: absolute;
      left: 333px;
      bottom: 24px;
    }

    .left-bottom3-boli {
      position: absolute;
      top: 138px;
      right: 96px;
    }

    .left-bottom3-xitu {
      position: absolute;
      bottom: 42px;
      left: 200px;
    }

    .center {
      flex: 1;
      order: 2;
      position: relative;
      left: 50%;
      /* top: 50%; */
      transform: translate(-50%, 0);
      transform-origin: 0 0;
    }

    .right {
      width: 520px;
      /* height: 100%; */
      position: absolute;
      right: 0;
      bottom: 20px;
      top: 106px;
      margin-right: 20px;
      order: 3;
      /* height: 93.5%; */
      /* bottom: 0.5%; */
      transform-origin: top;
      /* background-image: url('./assets/one/one-right-img.png'); */
      /* background-repeat: no-repeat;
        position: relative; */
      z-index: 1999;
    }

    .right-container3 {
      width: 520px;
      height: 228px;
    }

    .right-top3 {
      width: 100%;
      height: 50px;
      background-image: url('./assets/carbon/right-top4.png');
      background-repeat: no-repeat;
      position: relative;
    }

    .right-bottom3 {
      width: 100%;
      height: 178px;
    }
    .value-line {
      width: 520px;
      height: 170px;
    }

    .right-container1 {
      width: 520px;
      height: 380px;
    }

    .right-top1 {
      width: 100%;
      height: 50px;
      background-image: url('./assets/carbon/right-top1.png');
      background-repeat: no-repeat;
      position: relative;
    }

    .more-button {
      position: absolute;
      right: 10px;
      top: 13px;
      width: 74px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      background: rgba(20, 75, 102, 0.4);
      color: #ffffff;
      font-family: 'Alibaba PuHuiTi';
      font-style: normal;
      font-size: 14px;
      cursor: pointer;
    }

    .right-bottom1 {
      width: 100%;
      height: 330px;
    }

    .right-bottom2 {
      width: 100%;
      height: 270px;
    }

    .right-button-line {
      padding-top: 20px;
      height: 52px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .right-select-button {
      display: flex;
      align-items: center;
    }

    #right-select-unit1 {
      font-family: 'Alibaba PuHuiTi';
      font-size: 14px;
      color: #b4c0cc;
    }

    #right-select-unit2 {
      font-family: 'Alibaba PuHuiTi';
      font-size: 14px;
      color: #b4c0cc;
    }

    .active-button {
      height: 44px;
      width: 132px;
      line-height: 44px;
      text-align: center;
      margin-right: 10px;
      background-image: url('./assets/carbon/sec-button.png');
      background-repeat: no-repeat;
    }

    .common-button {
      height: 44px;
      width: 132px;
      line-height: 44px;
      text-align: center;
      margin-right: 10px;
      background-image: url('./assets/carbon/unsec-button.png');
      background-repeat: no-repeat;
    }

    .map-active-button {
      height: 32px;
      width: 100px;
      text-align: center;
      margin-right: 10px;
      background-image: url('./assets/carbon/map-active.png');
      background-repeat: no-repeat;
      color: #ffffff;
    }

    .map-common-button {
      height: 32px;
      width: 100px;
      text-align: center;
      margin-right: 10px;
      background-image: url('./assets/carbon/map-common.png');
      background-repeat: no-repeat;
      color: #ffffff70;
    }

    .right-process-all {
      height: 185px;
      margin-top: 10px;
    }

    #right-button1 {
      cursor: pointer;
      font-family: 'Alibaba PuHuiTi';
      font-size: 14px;
    }

    #right-button2 {
      cursor: pointer;
      font-family: 'Alibaba PuHuiTi';
      font-size: 14px;
    }

    #right-button3 {
      cursor: pointer;
      font-family: 'Alibaba PuHuiTi';
      font-size: 14px;
    }

    #right-button4 {
      cursor: pointer;
      font-family: 'Alibaba PuHuiTi';
      font-size: 14px;
    }

    #map-button1 {
      cursor: pointer;
      z-index: 2000;
      font-family: 'PMZD';
      font-weight: 400;
      font-size: 16px;
      line-height: 33px;
      letter-spacing: 0.05em;
    }

    #map-button2 {
      cursor: pointer;
      z-index: 2000;
      font-family: 'PMZD';
      font-weight: 400;
      font-size: 16px;
      line-height: 33px;
      letter-spacing: 0.05em;
    }

    #map-button3 {
      cursor: pointer;
      z-index: 2000;
      font-family: 'PMZD';
      font-weight: 400;
      font-size: 16px;
      line-height: 33px;
      letter-spacing: 0.05em;
    }

    #right-process-1 {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    #right-process-2 {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    #right-process-3 {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    #right-process-4 {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .right-process-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 24px;
    }

    .right-item-icon {
      width: 20px;
      height: 24px;
    }

    .right-item-icon1 {
      background-image: url('./assets/carbon/level1.png');
      background-repeat: no-repeat;
    }

    .right-item-icon2 {
      background-image: url('./assets/carbon/level2.png');
      background-repeat: no-repeat;
    }

    .right-item-icon3 {
      background-image: url('./assets/carbon/level3.png');
      background-repeat: no-repeat;
    }

    .right-item-icon4 {
      background-image: url('./assets/carbon/level4.png');
      background-repeat: no-repeat;
    }

    .right-item-icon5 {
      background-image: url('./assets/carbon/level5.png');
      background-repeat: no-repeat;
    }

    .right-item-icon6 {
      background-image: url('./assets/carbon/level6.png');
      background-repeat: no-repeat;
    }

    .right-item-icon7 {
      background-image: url('./assets/carbon/level7.png');
      background-repeat: no-repeat;
    }

    .right-item-icon8 {
      background-image: url('./assets/carbon/level8.png');
      background-repeat: no-repeat;
    }

    .right-item-text {
      font-size: 16px;
      font-family: 'Alibaba PuHuiTi';
    }

    .right-item-data {
      width: 60px;
      text-align: center;
      font-family: 'D-DIN';
      font-style: normal;
      font-weight: 700;
      font-size: 16px;
      line-height: 17px;
    }

    .right-item-text1 {
      color: #ff4d4d;
      text-shadow: 0px 2px 2px rgba(255, 0, 0, 0.5);
    }

    .el-progress-bar {
      padding-right: 0;
    }

    .progress-line {
      width: 320px;
    }

    .progress-red .el-progress-bar__outer {
      background-color: #d8d8d813 !important;
      overflow: inherit;
    }

    .progress-red .el-progress-bar__inner {
      background-image: linear-gradient(270deg,
          #ff4d4d 1.64%,
          rgba(204, 41, 41, 0.4) 100%);
    }

    /* .progress-red .el-progress-bar__inner::after {
      content: '';
      width: 8px;
      height: 8px;
      background: #FFFFFF;
      box-shadow: 0px 0px 4px #FF9898;
      border-radius: 4px;
      position: absolute;
      right: 0;
      top: -2px;
    } */

    .progress-red .el-progress__text {
      display: none;
    }

    .progress-orange .el-progress-bar__outer {
      background-color: #d8d8d813 !important;
      overflow: inherit;
    }

    .progress-orange .el-progress-bar__inner {
      background-image: linear-gradient(270deg,
          #ff8833 1.64%,
          rgba(204, 109, 41, 0.4) 100%);
    }

    .progress-orange .el-progress__text {
      display: none;
    }

    .progress-yellow .el-progress-bar__outer {
      background-color: #d8d8d813 !important;
      overflow: inherit;
    }

    .progress-yellow .el-progress-bar__inner {
      background-image: linear-gradient(270deg,
          #ffd15c 1.64%,
          rgba(200, 172, 36, 0.4) 100%);
    }

    .progress-yellow .el-progress__text {
      display: none;
    }

    .progress-blue .el-progress-bar__outer {
      background-color: #d8d8d813 !important;
      overflow: inherit;
    }

    .progress-blue .el-progress-bar__inner {
      background-image: linear-gradient(270deg,
          #3399ff 1.64%,
          rgba(41, 122, 204, 0.4) 100%);
    }

    .progress-blue .el-progress__text {
      display: none;
    }

    .right-item-text2 {
      color: #ff974d;
      text-shadow: 0px 2px 2px rgba(255, 106, 0, 0.5);
    }

    .right-item-text3 {
      color: #ffd15c;
      text-shadow: 0px 2px 2px rgba(255, 183, 0, 0.5);
    }

    .right-item-text4 {
      color: #33bbff;
      text-shadow: 0px 2px 2px rgba(0, 170, 255, 0.5);
    }

    .right-container2 {
      margin-top: 18px;
      width: 520px;
      height: 320px;
    }

    .right-top2 {
      width: 100%;
      height: 50px;
      background-image: url('./assets/carbon/right-top2.png');
      background-repeat: no-repeat;
    }

    .back-button {
      width: 121px;
      height: 36px;
      position: absolute;
      top: 15px;
      left: 0;
      background-image: url('./assets/carbon/back-button.png');
      background-repeat: no-repeat;
      z-index: 10;
      cursor: pointer;
    }

    .top-select {
      width: 160px;
      height: 38px;
      position: absolute;
      top: 15px;
      right: 100px;
      z-index: 10;
      cursor: pointer;
    }

    .el-select {
      width: 160px;
      height: 38px;
    }

    .el-input__inner {
      height: 38px;
      background: rgba(10, 37, 51, 0.6);
      border: 1px solid #33bbff;
      box-shadow: inset 0px 0px 5px 0.5px rgba(3, 251, 255, 0.651278);
      border-radius: 0;
      color: #ffffff;
      font-family: 'Alibaba PuHuiTi';
      font-weight: 500;
      font-size: 16px;
      text-shadow: 0px 2px 5px rgba(0, 170, 255, 0.5);
    }

    .el-select:hover .el-input__inner {
      border: 1px solid #33bbff;
    }

    .el-input__inner:hover {
      border: 1px solid #33bbff;
    }

    .el-icon-arrow-up:before {
      content: '';
      content: url('./assets/carbon/select-icon.png');
      width: 20px;
      height: 8px;
      transform: translate(-50%, -50%);
    }

    .el-input__suffix {
      right: 12px;
      border-left: 1px dashed #5c8599;
    }

    .el-select .el-input .el-select__caret {
      transform: rotateZ(0deg);
    }

    .el-select .el-input .el-select__caret.is-reverse {
      transform: rotateZ(180deg);
    }

    .el-input__suffix-inner {
      margin-left: 5px;
    }

    .el-popper .popper__arrow {
      display: none;
    }

    .el-popper[x-placement^='bottom'] {
      margin-top: 0;
    }

    .el-select-dropdown {
      border-radius: 0;
    }

    .el-popper {
      background: rgba(10, 37, 51, 0.6);
      border: 1px solid #33bbff;
    }

    .el-select-dropdown__item span {
      font-family: 'Alibaba PuHuiTi';
      color: #ffffff;
    }

    .el-select-dropdown__item.hover {
      background-color: rgb(23, 79, 107);
      color: #ffffff;
      font-weight: 500;
    }

    .el-select-dropdown__list {
      padding: 7px 0;
    }

    .el-select {
      width: 160px;
      height: 38px;
    }

    .el-input__inner {
      height: 38px;
      background: rgba(10, 37, 51, 0.6);
      border: 1px solid #33BBFF;
      box-shadow: inset 0px 0px 5px 0.5px rgba(3, 251, 255, 0.651278);
      border-radius: 0;
      color: #FFFFFF;
      ;
      font-family: 'Alibaba PuHuiTi';
      font-weight: 500;
      font-size: 16px;
      text-shadow: 0px 2px 5px rgba(0, 170, 255, 0.5);
    }

    .el-select:hover .el-input__inner {
      border: 1px solid #33BBFF;
    }

    .el-input__inner:hover {
      border: 1px solid #33BBFF;
    }

    .el-icon-arrow-up:before {
      content: "";
      content: url('./assets/carbon/select-icon.png');
      width: 20px;
      height: 8px;
      transform: translate(-50%, -50%);
    }

    .el-input__suffix {
      right: 12px;
      border-left: 1px dashed #5C859980;
    }

    .el-select .el-input .el-select__caret {
      transform: rotateZ(0deg);
    }

    .el-select .el-input .el-select__caret.is-reverse {
      transform: rotateZ(180deg);
    }

    .el-input__suffix-inner {
      margin-left: 5px;
    }

    .el-popper .popper__arrow {
      display: none;
    }

    .el-popper[x-placement^=bottom] {
      margin-top: 0;
    }

    .el-select-dropdown {
      border-radius: 0;
    }

    .el-popper {
      background: rgba(10, 37, 51, 0.6);
      border: 1px solid #33BBFF;
    }

    .el-select-dropdown__item span {
      font-family: 'Alibaba PuHuiTi';
      color: #FFFFFF;
    }

    .el-select-dropdown__item.hover {
      background-color: rgb(23, 79, 107);
      color: #FFFFFF;
      font-weight: 500;
    }

    .el-select-dropdown__list {
      padding: 7px 0;
    }

    .time-detail {
      position: absolute;
      top: 10px;
      left: 200px;
      display: flex;
      align-items: center;
    }

    .time-icon {
      width: 36px;
      height: 36px;
      background-image: url('./assets/carbon/time.png');
      background-repeat: no-repeat;
      margin-right: 10px;
    }

    .top-date {
      font-family: 'Alibaba PuHuiTi';
      font-style: normal;
      font-weight: 700;
      font-size: 14px;
      line-height: 19px;
      color: #a1adb3;
    }

    .top-time {
      font-family: 'LED';
      font-style: normal;
      font-weight: 500;
      font-size: 24px;
      line-height: 26px;
      letter-spacing: 0.1em;
      background: linear-gradient(180deg,
          #ffffff 0%,
          #e6f7ff 28.65%,
          #1ab3ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /*中间区域样式*/
    .container {
      width: 100px;
      height: 100px;
    }

    .center-top-title {
      width: 700px;
      position: absolute;
      top: 106px;
      left: 610px;
      right: 610px;
      height: 94px;
      display: flex;
      justify-content: space-between;
    }

    .center-map-button {
      position: absolute;
      left: 610px;
      top: 230px;
      display: flex;
    }

    .select-time {
      position: absolute;
      left: 610px;
      top: 699px;
    }

    .select-time .el-select {
      width: 100px;
      z-index: 2000;
    }

    .center-top-left {
      width: 208px;
      height: 94px;
      background-image: url('./assets/carbon/center-topback.png');
      background-repeat: no-repeat;
      z-index: 10;
      color: #cfdee5;
      font-size: 14px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .center-top-left1 {
      display: flex;
      align-items: center;
      margin-left: 30px;
    }

    .center-top-left2 {
      display: flex;
      align-items: center;
      margin-left: 30px;
    }

    .center-top-left-icon {
      margin: 3px 3px 0 0;
      width: 18px;
      height: 22px;
      background-image: url('./assets/carbon/center-topL.png');
      background-repeat: no-repeat;
    }

    .center-top-right-icon {
      margin: 3px 3px 0 0;
      width: 18px;
      height: 22px;
      background-image: url('./assets/carbon/center-topR.png');
      background-repeat: no-repeat;
    }

    .center-top-left-data1 {
      font-family: 'LED';
      font-style: normal;
      font-weight: 500;
      font-size: 22px;
      line-height: 26px;
      letter-spacing: 0.1em;
      background: linear-gradient(180deg,
          #ffffff 0%,
          #e6f7ff 28.65%,
          #1ab3ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-shadow: 0px 2px 3px rgba(0, 170, 255, 0.5);
      margin: 0 3px;
    }

    .center-top-left-data2 {
      font-family: 'LED';
      font-style: normal;
      font-weight: 500;
      font-size: 22px;
      line-height: 26px;
      letter-spacing: 0.1em;
      background: linear-gradient(180deg,
          #ffffff 0%,
          #ffeee6 28.65%,
          #ff5500 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-shadow: 0px 2px 3px rgba(255, 85, 0, 0.5);
    }

    .center-top-left-data3 {
      font-family: 'LED';
      font-style: normal;
      font-weight: 500;
      font-size: 22px;
      line-height: 26px;
      letter-spacing: 0.1em;
      background: linear-gradient(180deg,
          #ffffff 0%,
          #e6ffea 28.65%,
          #00ff2b 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-shadow: 0px 2px 3px rgba(0, 255, 43, 0.5);
    }

    .center-top-right {
      width: 327px;
      height: 92px;
      background-image: url('./assets/carbon/center-back1.png');
      background-repeat: no-repeat;
      z-index: 10;
    }

    .center-bottom {
      position: absolute;
      bottom: 20px;
      left: 610px;
      right: 610px;
      width: 700px;
      height: 276px;
    }

    .center-bottom-top {
      width: 100%;
      height: 50px;
      background-image: url('./assets/carbon/center-back.png');
      background-repeat: no-repeat;
    }

    .carbon-province {
      width: 520px;
      height: 320px;
    }

    .carbon-line {
      width: 700px;
      height: 226px;
    }

    .center-map {
      position: absolute;
      top: 150px;
      left: 610px;
      right: 620px;
    }

    #center-map1 {
      width: 700px;
      height: 600px;
      margin: 0 auto;
    }

    #center-map2 {
      width: 700px;
      height: 600px;
      margin: 0 auto;
    }

    #center-map3 {
      width: 700px;
      height: 600px;
      margin: 0 auto;
    }

    .data-dialog {
      width: 100vw;
      height: 100%;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .el-dialog {
      background: transparent;
      background-image: url('./assets/carbon/dialog-back.png');
      background-size: 100% 100%;
      width: 1238px;
      height: 752px;
      /* left: 50%;
      top: 50%;
      transform: translate(-50%, -50%); */
      margin: 0;
    }

    .table-data {
      position: absolute;
      top: 120px;
      left: 89px;
    }

    .el-table {
      width: 1060px;
      background-color: transparent;
    }

    .el-table .cell {
      font-family: 'Alibaba PuHuiTi';
      color: #ffffff;
      font-size: 14px;
    }

    .el-table th {
      background: linear-gradient(180deg, #29b1cc 0%, #0066cc 100%);
      font-family: 'Alibaba PuHuiTi';
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
    }

    .el-table tr {
      background-color: transparent;
    }

    .el-table--enable-row-hover .el-table__body tr:hover>td {
      background-color: rgba(27, 151, 204, 0.4) !important;
      color: #ffffff !important;
    }

    .el-table td.el-table__cell {
      border-bottom: none;
    }

    .el-table th.el-table__cell.is-leaf {
      border-bottom: none;
    }

    .el-table__row--striped td {
      background-color: rgba(27, 151, 204, 0.2) !important;
    }

    .el-table__body-wrapper::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    .el-table__body-wrapper::-webkit-scrollbar-thumb {
      background: #1ab3ff;
      border-radius: 18px;
    }

    .el-table::before {
      height: 0;
    }

    .el-dialog__headerbtn .el-dialog__close {
      width: 36px;
      height: 36px;
      background: #fff;
      font-size: 24px;
      border-radius: 18px;
      line-height: 36px;
      margin: 35px 35px 0 0;
    }

    /*中间区域*/
  </style>
</head>

<body>
  <div class="outer">
    <div class="box" id="app">
      <div class="back-button"></div>
      <div class="time-detail">
        <div class="time-icon"></div>
        <div class="time-data">
          <div class="top-date"></div>
          <div class="top-time"></div>
        </div>
      </div>
      <div class="top-select">
        <el-select v-model="selectValue" placeholder="请选择区域" @change="choosePostion">
          <el-option v-for="item in positionOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <!-- <div class="action-button">
          <span class="go-back"></span>
          <span class="full-screen"></span>
        </div> -->
      <div class="left animate__animated animate__delay-1s animate__bounceInLeft">
        <div class="left-container1">
          <div class="left-top1"></div>
          <div class="base-bottom">
            <div class="base-content">
              <div class="base-bottom-icon1"></div>
              <div class="base-bottom-text">省份</div>
              <div class="base-bottom-value">
                <span class="base-bottom-data">34</span>
                <span class="base-bottom-unit">个</span>
              </div>
            </div>
            <div class="base-content">
              <div class="base-bottom-icon2"></div>
              <div class="base-bottom-text">行业</div>
              <div class="base-bottom-value">
                <span class="base-bottom-data">9</span>
                <span class="base-bottom-unit">个</span>
              </div>
            </div>
            <div class="base-content">
              <div class="base-bottom-icon3"></div>
              <div class="base-bottom-text">园区</div>
              <div class="base-bottom-value">
                <span class="base-bottom-data">56</span>
                <span class="base-bottom-unit">万个</span>
              </div>
            </div>
            <div class="base-content">
              <div class="base-bottom-icon4"></div>
              <div class="base-bottom-text">企业</div>
              <div class="base-bottom-value">
                <span class="base-bottom-data">140</span>
                <span class="base-bottom-unit">万家</span>
              </div>
            </div>
          </div>
        </div>
        <div class="left-container2">
          <div class="left-top2"></div>
          <div class="left-bottom2">
            <!-- <div id="carbon-pie" class="carbon-pie"></div>
            <div class="left-bottom2-back"></div>
            <div class="left-bottom2-text">碳排放</div>
            <div class="pie-data-color">
              <span style="color: #00cccc">20%</span>
              <span style="color: #16d816">24%</span>
              <span style="color: #12d5b5">21%</span>
              <span style="color: #ffc44d">10%</span>
              <span style="color: #5533ff">10%</span>
              <span style="color: #ff5a4d">5%</span>
              <span style="color: #4d8dff">5%</span>
              <span style="color: #56d897">3%</span>
              <span style="color: #a84cd8">2%</span>
            </div> -->
            <div id="carbon-stackBar" class="carbon-stackBar"></div>
          </div>
        </div>
        <div class="left-container3">
          <div class="left-top3"></div>
          <div class="left-bottom3">
            <div class="left-bottom3-text">单位：亿吨</div>
            <div class="left-bottom3-back"></div>
            <div class="left-bottom3-shihua">
              <div class="left-circle-data" style="margin-top: 30px">
                12.6
              </div>
              <div style="margin-top: 10px">石化</div>
            </div>
            <div class="left-bottom3-dianli">
              <div class="left-circle-data" style="margin-top: 7px">10.4</div>
              <div style="margin-top: 5px">电力</div>
            </div>
            <div class="left-bottom3-meitan">
              <div class="left-circle-data" style="margin-top: 7px">8.7</div>
              <div style="margin-top: 5px">煤炭</div>
            </div>
            <div class="left-bottom3-jiancai">
              <div class="left-circle-data" style="margin-top: 7px">5.5</div>
              <div style="margin-top: 5px">建材</div>
            </div>
            <div class="left-bottom3-gangtie left-circle3">
              <div class="left-circle-data1" style="margin-top: 7px">5.0</div>
              <div style="margin-top: 3px">钢铁</div>
            </div>
            <div class="left-bottom3-jinshu left-circle4">
              <div class="left-circle-data1" style="margin-top: 3px">4.8</div>
              <div style="white-space: nowrap; margin-left: -8px">
                有色金属
              </div>
            </div>
            <div class="left-bottom3-shuini left-circle4">
              <div class="left-circle-data1" style="margin-top: 3px">2.1</div>
              <div>水泥</div>
            </div>
            <div class="left-bottom3-taoci left-circle4">
              <div class="left-circle-data1" style="margin-top: 3px">1.3</div>
              <div>陶瓷</div>
            </div>
            <div class="left-bottom3-boli left-circle5">
              <div class="left-circle-data1" style="margin-top: 3px">1.2</div>
              <div>玻璃</div>
            </div>
            <div class="left-bottom3-xitu left-circle5">
              <div class="left-circle-data1" style="margin-top: 3px">1.1</div>
              <div>稀土</div>
            </div>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="center-top-title">
          <div class="center-top-left">
            <div class="center-top-left1">
              <span>碳排放总量</span>
              <div class="center-top-left-data1">69.56</div>
              <span style="font-size: 10px;">亿吨</span>
            </div>
            <div class="center-top-left2">
              <span>同比：</span>
              <div class="center-top-left-icon"></div>
              <div class="center-top-left-data2">8%</div>
            </div>
          </div>
          <div class="center-top-left">
            <div class="center-top-left1">
              <span>碳指标存量</span>
              <div class="center-top-left-data1">19.5</div>
              <span style="font-size: 10px;">亿吨</span>
            </div>
            <div class="center-top-left2">
              <span>同比：</span>
              <div class="center-top-right-icon"></div>
              <div class="center-top-left-data3">6%</div>
            </div>
          </div>
          <div class="center-top-left">
            <div class="center-top-left1">
              <span>碳排放强度</span>
              <div class="center-top-left-data1">113</div>
              <span style="font-size: 10px;">吨/万元</span>
            </div>
            <div class="center-top-left2">
              <span>同比：</span>
              <div class="center-top-right-icon"></div>
              <div class="center-top-left-data3">6%</div>
            </div>
          </div>
        </div>
        <div class="center-map-button">
          <div id="map-button1">碳排放</div>
          <div id="map-button2">碳排放强度</div>
          <div id="map-button3">能源分布</div>
        </div>
        <div class="select-time">
          <el-select v-model="selectTime" placeholder="请选择区域" @change="chooseTime">
            <el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="center-map">
          <div id="center-map1"></div>
          <div id="center-map2"></div>
          <div id="center-map3"></div>
        </div>
        <div class="center-bottom">
          <div class="center-bottom-top"></div>
          <div class="center-bottom-bottom">
            <div id="carbon-line" class="carbon-line"></div>
          </div>
        </div>
      </div>
      <div class="right animate__animated animate__delay-1s animate__bounceInRight">
        <div class="right-container3">
          <div class="right-top3"></div>
          <div class="right-bottom3">
            <div id="value-line" class="value-line"></div>
          </div>
        </div>
        <div class="right-container1">
          <div class="right-top1">
            <div class="more-button" @click="viewAllData">查看更多</div>
          </div>
          <div class="right-bottom1">
            <div id="carbon-province" class="carbon-province"></div>
          </div>
        </div>
        <div class="right-container2">
          <div class="right-top2"></div>
          <div class="right-bottom2">
            <div class="right-button-line">
              <div class="right-select-button">
                <div id="right-button3">碳排放</div>
                <div id="right-button4">碳排放强度</div>
              </div>
              <div id="right-select-unit2"></div>
            </div>
            <div class="right-process-all">
              <div id="right-process-3">
                <div class="right-process-item">
                  <div class="right-item-icon right-item-icon1"></div>
                  <div class="right-item-text right-item-text1">华能国际</div>
                  <el-progress :percentage="92.4575" :stroke-width="5" class="progress-red progress-line"></el-progress>
                  <div class="right-item-data right-item-text1">36983</div>
                </div>
                <div class="right-process-item">
                  <div class="right-item-icon right-item-icon2"></div>
                  <div class="right-item-text right-item-text2">国电电力</div>
                  <el-progress :percentage="79.0275" :stroke-width="5"
                    class="progress-orange progress-line"></el-progress>
                  <div class="right-item-data right-item-text2">31611</div>
                </div>
                <div class="right-process-item">
                  <div class="right-item-icon right-item-icon3"></div>
                  <div class="right-item-text right-item-text3">中国建材</div>
                  <el-progress :percentage="66.49" :stroke-width="5"
                    class="progress-yellow progress-line"></el-progress>
                  <div class="right-item-data right-item-text3">26596</div>
                </div>
                <div class="right-process-item">
                  <div class="right-item-icon right-item-icon4"></div>
                  <div class="right-item-text right-item-text4">天山股份</div>
                  <el-progress :percentage="53.8425" :stroke-width="5"
                    class="progress-blue progress-line"></el-progress>
                  <div class="right-item-data right-item-text4">21537</div>
                </div>
                <div class="right-process-item">
                  <div class="right-item-icon right-item-icon5"></div>
                  <div class="right-item-text right-item-text4">海螺水泥</div>
                  <el-progress :percentage="52.785" :stroke-width="5" class="progress-blue progress-line"></el-progress>
                  <div class="right-item-data right-item-text4">21114</div>
                </div>
                <!-- <div class="right-process-item">
                  <div class="right-item-icon right-item-icon6"></div>
                  <div class="right-item-text right-item-text4">大唐发电</div>
                  <el-progress :percentage="50.1775" :stroke-width="5"
                    class="progress-blue progress-line"></el-progress>
                  <div class="right-item-data right-item-text4">20071</div>
                </div>
                <div class="right-process-item">
                  <div class="right-item-icon right-item-icon7"></div>
                  <div class="right-item-text right-item-text4">中国神华</div>
                  <el-progress :percentage="44.1625" :stroke-width="5"
                    class="progress-blue progress-line"></el-progress>
                  <div class="right-item-data right-item-text4">17665</div>
                </div>
                <div class="right-process-item">
                  <div class="right-item-icon right-item-icon8"></div>
                  <div class="right-item-text right-item-text4">中国石化</div>
                  <el-progress :percentage="43.14" :stroke-width="5" class="progress-blue progress-line"></el-progress>
                  <div class="right-item-data right-item-text4">17256</div>
                </div> -->
              </div>
              <div id="right-process-4">
                <div class="right-process-item">
                  <div class="right-item-icon right-item-icon1"></div>
                  <div class="right-item-text right-item-text1">大唐发电</div>
                  <el-progress :percentage="97.05" :stroke-width="5" class="progress-red progress-line"></el-progress>
                  <div class="right-item-data right-item-text1">19.41</div>
                </div>
                <div class="right-process-item">
                  <div class="right-item-icon right-item-icon2"></div>
                  <div class="right-item-text right-item-text2">国电电力</div>
                  <el-progress :percentage="94" :stroke-width="5" class="progress-orange progress-line"></el-progress>
                  <div class="right-item-data right-item-text2">18.8</div>
                </div>
                <div class="right-process-item">
                  <div class="right-item-icon right-item-icon3"></div>
                  <div class="right-item-text right-item-text3">华能国际</div>
                  <el-progress :percentage="90.4" :stroke-width="5" class="progress-yellow progress-line"></el-progress>
                  <div class="right-item-data right-item-text3">18.08</div>
                </div>
                <div class="right-process-item">
                  <div class="right-item-icon right-item-icon4"></div>
                  <div class="right-item-text right-item-text4">天山股份</div>
                  <el-progress :percentage="63.35" :stroke-width="5" class="progress-blue progress-line"></el-progress>
                  <div class="right-item-data right-item-text4">12.67</div>
                </div>
                <div class="right-process-item">
                  <div class="right-item-icon right-item-icon5"></div>
                  <div class="right-item-text right-item-text4">海螺水泥</div>
                  <el-progress :percentage="62.85" :stroke-width="5" class="progress-blue progress-line"></el-progress>
                  <div class="right-item-data right-item-text4">12.57</div>
                </div>
                <!-- <div class="right-process-item">
                  <div class="right-item-icon right-item-icon6"></div>
                  <div class="right-item-text right-item-text4">中国建材</div>
                  <el-progress :percentage="48.6" :stroke-width="5" class="progress-blue progress-line"></el-progress>
                  <div class="right-item-data right-item-text4">9.72</div>
                </div>
                <div class="right-process-item">
                  <div class="right-item-icon right-item-icon7"></div>
                  <div class="right-item-text right-item-text4">中国神华</div>
                  <el-progress :percentage="26.35" :stroke-width="5" class="progress-blue progress-line"></el-progress>
                  <div class="right-item-data right-item-text4">5.27</div>
                </div>
                <div class="right-process-item">
                  <div class="right-item-icon right-item-icon8"></div>
                  <div class="right-item-text right-item-text4">中国石化</div>
                  <el-progress :percentage="3.15" :stroke-width="5" class="progress-blue progress-line"></el-progress>
                  <div class="right-item-data right-item-text4">0.63</div>
                </div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-dialog class="data-dialog" :visible.sync="dialogTableVisible" :append-to-body="true"
        :close-on-click-modal="false" top="0">
        <div class="table-data">
          <el-table height="570" :data="carbonData" size="small" stripe :header-cell-style="{'text-align':'center'}"
            :cell-style="{'text-align':'center'}">
            <el-table-column type="index" label="序号" width="200"></el-table-column>
            <el-table-column property="name" label="省份" width="200"></el-table-column>
            <el-table-column property="value1" label="碳排放量（亿吨）" width="330"></el-table-column>
            <el-table-column property="value2" label="碳排放强度（吨/万元）" width="330"></el-table-column>
          </el-table>
        </div>
      </el-dialog>
    </div>
  </div>
  <script type="text/javascript" src="./countUp.min.js"></script>
  <script type="text/javascript" src="./echart5.4.3.js"></script>
  <!-- <script type="text/javascript" src="./echarts-liquidfill.js"></script>c -->
  <script type="text/javascript" src="./element/vue.js"></script>
  <script type="text/javascript" src="./element/element.js"></script>
  <script type="text/javascript" src="./mapData/chinaMap.json"></script>
  <script type="text/javascript" src="./mapData/carbon1.json"></script>
  <script type="text/javascript" src="./mapData/carbon2.json"></script>
  <script type="text/javascript" src="./mapData/carbon5.json"></script>
  <script type="text/javascript" src="./mapData/tableData1.json"></script>
  <script type="text/javascript">
    var rtime;
    var timeout = false;
    var delta = 200;
    window.onload = () => {
      resize();
    };

    function resize() {
      const height = window.outerHeight;
      const app = document.getElementById('app');
      const right = document.querySelector('.right');
      const left = document.querySelector('.left');
      const outer = document.querySelector('.outer');
      const center = document.querySelector('.center');
      const dataDialog = document.querySelector('.el-dialog');

      const heightPrecent = window.innerHeight / 1080;
      const widthPrecent = window.innerWidth / 1920;
      app.style.scale =
        heightPrecent < widthPrecent ? heightPrecent : widthPrecent;
      dataDialog.style.scale =
        heightPrecent < widthPrecent ? heightPrecent : widthPrecent;
    }

    function resizeend() {
      if (new Date() - rtime < delta) {
        setTimeout(resizeend, delta);
      } else {
        timeout = false;
        resize();
      }
    }

    window.addEventListener('resize', (event) => {
      rtime = new Date();
      if (timeout === false) {
        timeout = true;
        setTimeout(resizeend, delta);
      }
    });

    new Vue({
      el: '#app',
      data: function () {
        return {
          active: 'left',
          active1: 'left',
          positionOptions: [
            {
              label: '全国',
              value: 'china'
            },
            {
              label: '上海',
              value: 'shangHai'
            }
          ],
          selectValue: 'china',
          dialogTableVisible: false,
          carbonData: [],
          selectTime: 1000,
          timeOptions: [
            {
              label: '0.5x',
              value: 2000
            },
            {
              label: '1x',
              value: 1000
            },
            {
              label: '1.5x',
              value: 667
            },
            {
              label: '2x',
              value: 500
            }
          ]
        };
      },
      created() {
        this.carbonData = tableData1;
      },
      methods: {
        choosePostion() {
          if (this.selectValue === 'shangHai') {
            const apiUrl = window.location.href.replace('carbonPage1', 'carbonPage2');
            window.location.href = apiUrl;
          }
        },
        viewAllData() {
          this.dialogTableVisible = true;
        },
        chooseTime() {
          window.initMap1(this.selectTime);
          window.initMap2(this.selectTime);
          window.initMap3(this.selectTime);
        }
      }
    });

    function initMap1(timePlayInterval) {
      let dom = document.getElementById('center-map1');
      let myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false,
      });
      let mapData = carbon1;
      echarts.registerMap('china', chinaMap);
      let option = {
        timeline: {
          axisType: 'category',
          data: ['2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023'],
          playInterval: timePlayInterval,
          left: '18%',
          right: '15%',
          label: {
            normal: {
              textStyle: {
                color: '#fff',
              },
            },
            emphasis: {
              textStyle: {
                color: '#fff',
                width: 15
              },
            },
          },
          symbolSize: 8,
          lineStyle: {
            color: '#1AB3FF',
            width: 4
          },
          checkpointStyle: {
            borderColor: '#1AB3FF',
            color: '#ffffff',
            borderWidth: 2,
          },
          controlStyle: {
            showNextBtn: true,
            showPrevBtn: true,
            normal: {
              color: '#1AB3FF',
              borderColor: '#1AB3FF'
            },
            emphasis: {
              color: 'rgb(58,115,192)',
              borderColor: 'rgb(58,115,192)'
            }
          }
        },
        baseOption: {
          visualMap: {
            max: 10,
            min: 0,
            text: ['CO₂(亿吨)'],
            itemWidth: 12,
            itemHeight: 300,
            calculable: true,
            left: 600,
            bottom: 30,
            textStyle: {
              color: '#ffffff'
            },
            inRange: {
              color: ['rgba(26, 179, 255, 0.3)', '#1AB3FF']
            }
          },
          tooltip: {},
          geo: {
            show: true,
            map: 'china',
            label: {
              show: true,
              textStyle: {
                color: '#ffffff'
              },
              emphasis: {
                color: 'ffffff'
              },
            },
            roam: false,
            itemStyle: {
              borderColor: '#1AB3FF',
              borderWidth: 2,
              shadowColor: '#00BDFF72',
              shadowOffsetX: 3,
              shadowOffsetY: 3,
              shadowBlur: 3,
              emphasis: {
                areaColor: '#145177'
              },
            }
          },
          series: [
            // {
            //   type: 'map',
            //   name: '碳排放',
            //   map: 'china',
            //   geoIndex: 0,
            //   tooltip: {
            //     show: true,
            //     formatter: function (params) {
            //       var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
            //         <div style="padding-top: 30px">
            //           <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
            //           <span style="font-size: 14px">(亿吨)</span>
            //         </div>
            //         <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
            //         </div>`;
            //       return str;
            //     },
            //     backgroundColor: 'rgba(0,0,0,0)',
            //   },
            //   label: {
            //     show: false,
            //   },
            //   roam: false
            // }
          ]
        },
        options: [
          {
            series: [
              {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 18,
                zlevel: 1,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value[2] * 10000).toFixed(2)}</span>
                        <span style="font-size: 14px">(万吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                data: [
                  {
                    name: '漕河泾园区',
                    value: [123.838737, 31.272559, 0.00020],
                    symbol: 'image://./assets/carbon/platform-icon.png'
                  }
                ]
              },
              {
                type: 'map',
                name: '碳排放',
                map: 'china',
                geoIndex: 0,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
                        <span style="font-size: 14px">(亿吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                label: {
                  show: false,
                },
                roam: false,
                data: mapData[0]
              }
            ]
          },
          {
            series: [
              {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 18,
                zlevel: 1,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value[2] * 10000).toFixed(2)}</span>
                        <span style="font-size: 14px">(万吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                data: [
                  {
                    name: '漕河泾园区',
                    value: [123.838737, 31.272559, 0.00022],
                    symbol: 'image://./assets/carbon/platform-icon.png'
                  }
                ]
              },
              {
                type: 'map',
                name: '碳排放',
                map: 'china',
                geoIndex: 0,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
                        <span style="font-size: 14px">(亿吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                label: {
                  show: false,
                },
                roam: false,
                data: mapData[1]
              }
            ]
          },
          {
            series: [
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 18,
                zlevel: 1,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value[2] * 10000).toFixed(2)}</span>
                        <span style="font-size: 14px">(万吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                data: [
                  {
                    name: '漕河泾园区',
                    value: [123.838737, 31.272559, 0.00024],
                    symbol: 'image://./assets/carbon/platform-icon.png'
                  }
                ]
              },
              {
                type: 'map',
                name: '碳排放',
                map: 'china',
                geoIndex: 0,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
                        <span style="font-size: 14px">(亿吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                label: {
                  show: false,
                },
                roam: false,
                data: mapData[2]
              }
            ]
          },
          {
            series: [
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 18,
                zlevel: 1,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value[2] * 10000).toFixed(2)}</span>
                        <span style="font-size: 14px">(万吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                data: [
                  {
                    name: '漕河泾园区',
                    value: [123.838737, 31.272559, 0.00026],
                    symbol: 'image://./assets/carbon/platform-icon.png'
                  }
                ]
              },
              {
                type: 'map',
                name: '碳排放',
                map: 'china',
                geoIndex: 0,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
                        <span style="font-size: 14px">(亿吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                label: {
                  show: false,
                },
                roam: false,
                data: mapData[3]
              }
            ]
          },
          {
            series: [
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 18,
                zlevel: 1,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value[2] * 10000).toFixed(2)}</span>
                        <span style="font-size: 14px">(万吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                data: [
                  {
                    name: '漕河泾园区',
                    value: [123.838737, 31.272559, 0.00028],
                    symbol: 'image://./assets/carbon/platform-icon.png'
                  }
                ]
              },
              {
                type: 'map',
                name: '碳排放',
                map: 'china',
                geoIndex: 0,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
                        <span style="font-size: 14px">(亿吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                label: {
                  show: false,
                },
                roam: false,
                data: mapData[4]
              }
            ]
          },
          {
            series: [
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 18,
                zlevel: 1,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value[2] * 10000).toFixed(2)}</span>
                        <span style="font-size: 14px">(万吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                data: [
                  {
                    name: '漕河泾园区',
                    value: [123.838737, 31.272559, 0.00030],
                    symbol: 'image://./assets/carbon/platform-icon.png'
                  }
                ]
              },
              {
                type: 'map',
                name: '碳排放',
                map: 'china',
                geoIndex: 0,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
                        <span style="font-size: 14px">(亿吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                label: {
                  show: false,
                },
                roam: false,
                data: mapData[5]
              }
            ]
          },
          {
            series: [
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 18,
                zlevel: 1,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value[2] * 10000).toFixed(2)}</span>
                        <span style="font-size: 14px">(万吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                data: [
                  {
                    name: '漕河泾园区',
                    value: [123.838737, 31.272559, 0.00032],
                    symbol: 'image://./assets/carbon/platform-icon.png'
                  }
                ]
              },
              {
                type: 'map',
                name: '碳排放',
                map: 'china',
                geoIndex: 0,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
                        <span style="font-size: 14px">(亿吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                label: {
                  show: false,
                },
                roam: false,
                data: mapData[6]
              }
            ]
          },
          {
            series: [
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 18,
                zlevel: 1,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value[2] * 10000).toFixed(2)}</span>
                        <span style="font-size: 14px">(万吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                data: [
                  {
                    name: '漕河泾园区',
                    value: [123.838737, 31.272559, 0.00034],
                    symbol: 'image://./assets/carbon/platform-icon.png'
                  }
                ]
              },
              {
                type: 'map',
                name: '碳排放',
                map: 'china',
                geoIndex: 0,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
                        <span style="font-size: 14px">(亿吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                label: {
                  show: false,
                },
                roam: false,
                data: mapData[7]
              }
            ]
          },
          {
            series: [
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 18,
                zlevel: 1,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value[2] * 10000).toFixed(2)}</span>
                        <span style="font-size: 14px">(万吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                data: [
                  {
                    name: '漕河泾园区',
                    value: [123.838737, 31.272559, 0.00036],
                    symbol: 'image://./assets/carbon/platform-icon.png'
                  }
                ]
              },
              {
                type: 'map',
                name: '碳排放',
                map: 'china',
                geoIndex: 0,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
                        <span style="font-size: 14px">(亿吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                label: {
                  show: false,
                },
                roam: false,
                data: mapData[8]
              }
            ]
          }
        ]
      };
      myChart.setOption(option);
      myChart.on('click', function (params) {
        if (params.name === '上海') {
          const apiUrl = window.location.href.replace('carbonPage1', 'carbonPage2');
          window.location.href = apiUrl;
        }
      })
    }
    initMap1(1000);

    function initMap2(timePlayInterval) {
      let dom = document.getElementById('center-map2');
      let myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false,
      });
      let mapData = carbon2;
      echarts.registerMap('china', chinaMap);
      let option = {
        timeline: {
          axisType: 'category',
          data: ['2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023'],
          playInterval: 1000,
          left: '18%',
          right: '15%',
          label: {
            normal: {
              textStyle: {
                color: '#fff',
              },
            },
            emphasis: {
              textStyle: {
                color: '#fff',
                width: 15
              },
            },
          },
          symbolSize: 8,
          lineStyle: {
            color: '#1AB3FF',
            width: 4
          },
          checkpointStyle: {
            borderColor: '#1AB3FF',
            color: '#ffffff',
            borderWidth: 2,
          },
          controlStyle: {
            showNextBtn: true,
            showPrevBtn: true,
            normal: {
              color: '#1AB3FF',
              borderColor: '#1AB3FF'
            },
            emphasis: {
              color: 'rgb(58,115,192)',
              borderColor: 'rgb(58,115,192)'
            }
          }
        },
        baseOption: {
          visualMap: {
            max: 2,
            min: 0,
            text: ['CO₂(吨/万元)'],
            itemWidth: 12,
            itemHeight: 300,
            calculable: true,
            left: 600,
            bottom: 30,
            textStyle: {
              color: '#ffffff'
            },
            inRange: {
              color: ['rgba(26, 179, 255, 0.3)', '#1AB3FF']
            }
          },
          tooltip: {},
          geo: {
            show: true,
            map: 'china',
            label: {
              show: true,
              textStyle: {
                color: '#ffffff'
              },
              emphasis: {
                color: 'ffffff'
              },
            },
            roam: false,
            itemStyle: {
              borderColor: '#1AB3FF',
              borderWidth: 2,
              shadowColor: '#00BDFF72',
              shadowOffsetX: 3,
              shadowOffsetY: 3,
              shadowBlur: 3,
              emphasis: {
                areaColor: '#145177'
              },
            }
          },
          // series: [{
          //   type: 'map',
          //   name: '碳排放',
          //   map: 'china',
          //   geoIndex: 0,
          //   tooltip: {
          //     show: true,
          //     formatter: function (params) {
          //       var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
          //         <div style="padding-top: 30px">
          //           <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
          //           <span style="font-size: 14px">(吨/万元)</span>
          //         </div>
          //         <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
          //         </div>`;
          //       return str;
          //     },
          //     backgroundColor: 'rgba(0,0,0,0)',
          //   },
          //   label: {
          //     show: false,
          //   },
          //   roam: false
          // }]
        },
        options: [
        {
            series: [
              {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 18,
                zlevel: 1,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value[2] * 10000).toFixed(2)}</span>
                        <span style="font-size: 14px">(万吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                data: [
                  {
                    name: '漕河泾园区',
                    value: [123.838737, 31.272559, 0.0000060],
                    symbol: 'image://./assets/carbon/platform-icon.png'
                  }
                ]
              },
              {
                type: 'map',
                name: '碳排放',
                map: 'china',
                geoIndex: 0,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
                        <span style="font-size: 14px">(亿吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                label: {
                  show: false,
                },
                roam: false,
                data: mapData[0]
              }
            ]
          },
          {
            series: [
              {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 18,
                zlevel: 1,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value[2] * 10000).toFixed(2)}</span>
                        <span style="font-size: 14px">(万吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                data: [
                  {
                    name: '漕河泾园区',
                    value: [123.838737, 31.272559, 0.0000061],
                    symbol: 'image://./assets/carbon/platform-icon.png'
                  }
                ]
              },
              {
                type: 'map',
                name: '碳排放',
                map: 'china',
                geoIndex: 0,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
                        <span style="font-size: 14px">(亿吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                label: {
                  show: false,
                },
                roam: false,
                data: mapData[1]
              }
            ]
          },
          {
            series: [
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 18,
                zlevel: 1,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value[2] * 10000).toFixed(2)}</span>
                        <span style="font-size: 14px">(万吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                data: [
                  {
                    name: '漕河泾园区',
                    value: [123.838737, 31.272559, 0.0000062],
                    symbol: 'image://./assets/carbon/platform-icon.png'
                  }
                ]
              },
              {
                type: 'map',
                name: '碳排放',
                map: 'china',
                geoIndex: 0,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
                        <span style="font-size: 14px">(亿吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                label: {
                  show: false,
                },
                roam: false,
                data: mapData[2]
              }
            ]
          },
          {
            series: [
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 18,
                zlevel: 1,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value[2] * 10000).toFixed(2)}</span>
                        <span style="font-size: 14px">(万吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                data: [
                  {
                    name: '漕河泾园区',
                    value: [123.838737, 31.272559, 0.0000063],
                    symbol: 'image://./assets/carbon/platform-icon.png'
                  }
                ]
              },
              {
                type: 'map',
                name: '碳排放',
                map: 'china',
                geoIndex: 0,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
                        <span style="font-size: 14px">(亿吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                label: {
                  show: false,
                },
                roam: false,
                data: mapData[3]
              }
            ]
          },
          {
            series: [
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 18,
                zlevel: 1,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value[2] * 10000).toFixed(2)}</span>
                        <span style="font-size: 14px">(万吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                data: [
                  {
                    name: '漕河泾园区',
                    value: [123.838737, 31.272559, 0.0000064],
                    symbol: 'image://./assets/carbon/platform-icon.png'
                  }
                ]
              },
              {
                type: 'map',
                name: '碳排放',
                map: 'china',
                geoIndex: 0,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
                        <span style="font-size: 14px">(亿吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                label: {
                  show: false,
                },
                roam: false,
                data: mapData[4]
              }
            ]
          },
          {
            series: [
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 18,
                zlevel: 1,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value[2] * 10000).toFixed(2)}</span>
                        <span style="font-size: 14px">(万吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                data: [
                  {
                    name: '漕河泾园区',
                    value: [123.838737, 31.272559, 0.0000065],
                    symbol: 'image://./assets/carbon/platform-icon.png'
                  }
                ]
              },
              {
                type: 'map',
                name: '碳排放',
                map: 'china',
                geoIndex: 0,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
                        <span style="font-size: 14px">(亿吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                label: {
                  show: false,
                },
                roam: false,
                data: mapData[5]
              }
            ]
          },
          {
            series: [
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 18,
                zlevel: 1,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value[2] * 10000).toFixed(2)}</span>
                        <span style="font-size: 14px">(万吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                data: [
                  {
                    name: '漕河泾园区',
                    value: [123.838737, 31.272559, 0.0000066],
                    symbol: 'image://./assets/carbon/platform-icon.png'
                  }
                ]
              },
              {
                type: 'map',
                name: '碳排放',
                map: 'china',
                geoIndex: 0,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
                        <span style="font-size: 14px">(亿吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                label: {
                  show: false,
                },
                roam: false,
                data: mapData[6]
              }
            ]
          },
          {
            series: [
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 18,
                zlevel: 1,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value[2] * 10000).toFixed(2)}</span>
                        <span style="font-size: 14px">(万吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                data: [
                  {
                    name: '漕河泾园区',
                    value: [123.838737, 31.272559, 0.0000067],
                    symbol: 'image://./assets/carbon/platform-icon.png'
                  }
                ]
              },
              {
                type: 'map',
                name: '碳排放',
                map: 'china',
                geoIndex: 0,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
                        <span style="font-size: 14px">(亿吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                label: {
                  show: false,
                },
                roam: false,
                data: mapData[7]
              }
            ]
          },
          {
            series: [
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 18,
                zlevel: 1,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value[2] * 10000).toFixed(2)}</span>
                        <span style="font-size: 14px">(万吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                data: [
                  {
                    name: '漕河泾园区',
                    value: [123.838737, 31.272559, 0.0000000068],
                    symbol: 'image://./assets/carbon/platform-icon.png'
                  }
                ]
              },
              {
                type: 'map',
                name: '碳排放',
                map: 'china',
                geoIndex: 0,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
                        <span style="font-size: 14px">(亿吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                label: {
                  show: false,
                },
                roam: false,
                data: mapData[8]
              }
            ]
          }
        ]
      };
      myChart.setOption(option);
      myChart.on('click', function (params) {
        if (params.name === '上海') {
          const apiUrl = window.location.href.replace('carbonPage1', 'carbonPage2');
          window.location.href = apiUrl;
        }
      })
    }
    initMap2(1000);

    function initMap3(timePlayInterval) {
      let dom = document.getElementById('center-map3');
      let myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false,
      });
      let mapData = carbon5;
      echarts.registerMap('china', chinaMap);
      let option = {
        timeline: {
          axisType: 'category',
          data: ['2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023'],
          playInterval: 1000,
          left: '18%',
          right: '15%',
          label: {
            normal: {
              textStyle: {
                color: '#fff',
              },
            },
            emphasis: {
              textStyle: {
                color: '#fff',
                width: 15
              },
            },
          },
          symbolSize: 8,
          lineStyle: {
            color: '#1AB3FF',
            width: 4
          },
          checkpointStyle: {
            borderColor: '#1AB3FF',
            color: '#ffffff',
            borderWidth: 2,
          },
          controlStyle: {
            showNextBtn: true,
            showPrevBtn: true,
            normal: {
              color: '#1AB3FF',
              borderColor: '#1AB3FF'
            },
            emphasis: {
              color: 'rgb(58,115,192)',
              borderColor: 'rgb(58,115,192)'
            }
          }
        },
        baseOption: {
          visualMap: {
            max: 40,
            min: 0,
            text: ['能源(亿吨)'],
            itemWidth: 12,
            itemHeight: 300,
            calculable: true,
            left: 600,
            bottom: 30,
            textStyle: {
              color: '#ffffff'
            },
            inRange: {
              color: ['rgba(26, 179, 255, 0.3)', '#1AB3FF']
            }
          },
          tooltip: {},
          geo: {
            show: true,
            map: 'china',
            label: {
              show: true,
              textStyle: {
                color: '#ffffff'
              },
              emphasis: {
                color: 'ffffff'
              },
            },
            roam: false,
            itemStyle: {
              borderColor: '#1AB3FF',
              borderWidth: 2,
              shadowColor: '#00BDFF72',
              shadowOffsetX: 3,
              shadowOffsetY: 3,
              shadowBlur: 3,
              emphasis: {
                areaColor: '#145177'
              },
            }
          },
          // series: [{
          //   type: 'map',
          //   name: '能源分布',
          //   map: 'china',
          //   geoIndex: 0,
          //   tooltip: {
          //     show: true,
          //     formatter: function (params) {
          //       var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
          //         <div style="padding-top: 30px">
          //           <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
          //           <span style="font-size: 14px">(亿吨)</span>
          //         </div>
          //         <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
          //         </div>`;
          //       return str;
          //     },
          //     backgroundColor: 'rgba(0,0,0,0)',
          //   },
          //   label: {
          //     show: false,
          //   },
          //   roam: false
          // }]
        },
        options: [
          {
            series: [
              {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 18,
                zlevel: 1,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value[2] * 10000).toFixed(2)}</span>
                        <span style="font-size: 14px">(万吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                data: [
                  {
                    name: '漕河泾园区',
                    value: [123.838737, 31.272559, 0.00220],
                    symbol: 'image://./assets/carbon/platform-icon.png'
                  }
                ]
              },
              {
                type: 'map',
                name: '碳排放',
                map: 'china',
                geoIndex: 0,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
                        <span style="font-size: 14px">(亿吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                label: {
                  show: false,
                },
                roam: false,
                data: mapData[0]
              }
            ]
          },
          {
            series: [
              {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 18,
                zlevel: 1,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value[2] * 10000).toFixed(2)}</span>
                        <span style="font-size: 14px">(万吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                data: [
                  {
                    name: '漕河泾园区',
                    value: [123.838737, 31.272559, 0.00222],
                    symbol: 'image://./assets/carbon/platform-icon.png'
                  }
                ]
              },
              {
                type: 'map',
                name: '碳排放',
                map: 'china',
                geoIndex: 0,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
                        <span style="font-size: 14px">(亿吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                label: {
                  show: false,
                },
                roam: false,
                data: mapData[1]
              }
            ]
          },
          {
            series: [
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 18,
                zlevel: 1,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value[2] * 10000).toFixed(2)}</span>
                        <span style="font-size: 14px">(万吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                data: [
                  {
                    name: '漕河泾园区',
                    value: [123.838737, 31.272559, 0.00224],
                    symbol: 'image://./assets/carbon/platform-icon.png'
                  }
                ]
              },
              {
                type: 'map',
                name: '碳排放',
                map: 'china',
                geoIndex: 0,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
                        <span style="font-size: 14px">(亿吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                label: {
                  show: false,
                },
                roam: false,
                data: mapData[2]
              }
            ]
          },
          {
            series: [
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 18,
                zlevel: 1,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value[2] * 10000).toFixed(2)}</span>
                        <span style="font-size: 14px">(万吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                data: [
                  {
                    name: '漕河泾园区',
                    value: [123.838737, 31.272559, 0.00226],
                    symbol: 'image://./assets/carbon/platform-icon.png'
                  }
                ]
              },
              {
                type: 'map',
                name: '碳排放',
                map: 'china',
                geoIndex: 0,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
                        <span style="font-size: 14px">(亿吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                label: {
                  show: false,
                },
                roam: false,
                data: mapData[3]
              }
            ]
          },
          {
            series: [
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 18,
                zlevel: 1,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value[2] * 10000).toFixed(2)}</span>
                        <span style="font-size: 14px">(万吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                data: [
                  {
                    name: '漕河泾园区',
                    value: [123.838737, 31.272559, 0.00228],
                    symbol: 'image://./assets/carbon/platform-icon.png'
                  }
                ]
              },
              {
                type: 'map',
                name: '碳排放',
                map: 'china',
                geoIndex: 0,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
                        <span style="font-size: 14px">(亿吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                label: {
                  show: false,
                },
                roam: false,
                data: mapData[4]
              }
            ]
          },
          {
            series: [
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 18,
                zlevel: 1,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value[2] * 10000).toFixed(2)}</span>
                        <span style="font-size: 14px">(万吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                data: [
                  {
                    name: '漕河泾园区',
                    value: [123.838737, 31.272559, 0.00230],
                    symbol: 'image://./assets/carbon/platform-icon.png'
                  }
                ]
              },
              {
                type: 'map',
                name: '碳排放',
                map: 'china',
                geoIndex: 0,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
                        <span style="font-size: 14px">(亿吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                label: {
                  show: false,
                },
                roam: false,
                data: mapData[5]
              }
            ]
          },
          {
            series: [
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 18,
                zlevel: 1,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value[2] * 10000).toFixed(2)}</span>
                        <span style="font-size: 14px">(万吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                data: [
                  {
                    name: '漕河泾园区',
                    value: [123.838737, 31.272559, 0.00232],
                    symbol: 'image://./assets/carbon/platform-icon.png'
                  }
                ]
              },
              {
                type: 'map',
                name: '碳排放',
                map: 'china',
                geoIndex: 0,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
                        <span style="font-size: 14px">(亿吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                label: {
                  show: false,
                },
                roam: false,
                data: mapData[6]
              }
            ]
          },
          {
            series: [
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 18,
                zlevel: 1,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value[2] * 10000).toFixed(2)}</span>
                        <span style="font-size: 14px">(万吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                data: [
                  {
                    name: '漕河泾园区',
                    value: [123.838737, 31.272559, 0.00234],
                    symbol: 'image://./assets/carbon/platform-icon.png'
                  }
                ]
              },
              {
                type: 'map',
                name: '碳排放',
                map: 'china',
                geoIndex: 0,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
                        <span style="font-size: 14px">(亿吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                label: {
                  show: false,
                },
                roam: false,
                data: mapData[7]
              }
            ]
          },
          {
            series: [
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 18,
                zlevel: 1,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value[2] * 10000).toFixed(2)}</span>
                        <span style="font-size: 14px">(万吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                data: [
                  {
                    name: '漕河泾园区',
                    value: [123.838737, 31.272559, 0.00236],
                    symbol: 'image://./assets/carbon/platform-icon.png'
                  }
                ]
              },
              {
                type: 'map',
                name: '碳排放',
                map: 'china',
                geoIndex: 0,
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    var str = `<div style = "background:url('./assets/carbon/map-tooltip.png') no-repeat;width:200px;height:120px;font-size: 16px;text-align: center;">
                      <div style="padding-top: 30px">
                        <span class="center-top-left-data1">${(params.value).toFixed(2)}</span>
                        <span style="font-size: 14px">(亿吨)</span>
                      </div>
                      <div style="margin-top: 15px;font-size: 20px;font-weight: 700;color: '#ffffff'">${params.name}</div>
                      </div>`;
                    return str;
                  },
                  backgroundColor: 'rgba(0,0,0,0)',
                },
                label: {
                  show: false,
                },
                roam: false,
                data: mapData[8]
              }
            ]
          }
        ]
      };
      myChart.setOption(option);
      myChart.on('click', function (params) {
        if (params.name === '上海') {
          const apiUrl = window.location.href.replace('carbonPage1', 'carbonPage2');
          window.location.href = apiUrl;
        }
      })
    }
    initMap3(1000);

    // 获取左上角时间
    const weekDays = [
      '星期日',
      '星期一',
      '星期二',
      '星期三',
      '星期四',
      '星期五',
      '星期六',
    ];
    function zero(params) {
      if (params >= 10) {
        return params;
      } else {
        return `0${params}`;
      }
    }
    setInterval(() => {
      const curDate = new Date();
      let topDate = document.querySelector('.top-date');
      let topTime = document.querySelector('.top-time');
      topDate.innerHTML = `${curDate.getFullYear()}/${zero(
        curDate.getMonth() + 1
      )}/${curDate.getDate()} ${weekDays[curDate.getDay()]}`;
      topTime.innerHTML = `${zero(curDate.getHours())}:${zero(
        curDate.getMinutes()
      )}:${zero(curDate.getSeconds())}`;
    }, 1000);

    // 全国地图按钮初始化
    const mapButton1 = document.getElementById('map-button1');
    mapButton1.className = 'map-active-button';
    const mapButton2 = document.getElementById('map-button2');
    mapButton2.className = 'map-common-button';
    const mapButton3 = document.getElementById('map-button3');
    mapButton3.className = 'map-common-button';
    const centerMap1 = document.getElementById('center-map1');
    const centerMap2 = document.getElementById('center-map2');
    const centerMap3 = document.getElementById('center-map3');
    centerMap1.style = '';
    centerMap2.style = 'display: none';
    centerMap3.style = 'display: none';
    mapButton1.onclick = function getMapClass1() {
      mapButton1.className = 'map-active-button';
      mapButton2.className = 'map-common-button';
      mapButton3.className = 'map-common-button';
      centerMap1.style = '';
      centerMap2.style = 'display: none';
      centerMap3.style = 'display: none';
    };
    mapButton2.onclick = function getMapClass2() {
      mapButton1.className = 'map-common-button';
      mapButton2.className = 'map-active-button';
      mapButton3.className = 'map-common-button';
      centerMap1.style = 'display: none';
      centerMap2.style = '';
      centerMap3.style = 'display: none';
    };
    mapButton3.onclick = function getMapClass2() {
      mapButton1.className = 'map-common-button';
      mapButton2.className = 'map-common-button';
      mapButton3.className = 'map-active-button';
      centerMap1.style = 'display: none';
      centerMap2.style = 'display: none';
      centerMap3.style = '';
    };

    // 各企业排放按钮初始化
    const rightButton3 = document.getElementById('right-button3');
    rightButton3.className = 'active-button';
    const rightButton4 = document.getElementById('right-button4');
    rightButton4.className = 'common-button';
    const rightProcess3 = document.getElementById('right-process-3');
    const rightProcess4 = document.getElementById('right-process-4');
    rightProcess3.style = '';
    rightProcess4.style = 'display: none';
    const rightSelectUnit2 = document.getElementById('right-select-unit2');
    rightSelectUnit2.innerHTML = '单位：万吨';
    rightButton3.onclick = function getButtonClass3() {
      rightButton3.className = 'active-button';
      rightButton4.className = 'common-button';
      rightProcess3.style = '';
      rightProcess4.style = 'display: none';
      rightSelectUnit2.innerHTML = '单位：万吨';
    };
    rightButton4.onclick = function getButtonClass4() {
      rightButton3.className = 'common-button';
      rightButton4.className = 'active-button';
      rightProcess3.style = 'display: none';
      rightProcess4.style = '';
      rightSelectUnit2.innerHTML = '单位：吨/万元';
    };

    // 行业碳排放饼图
    // function initCarbonPie() {
    //   var chartDom = document.getElementById('carbon-pie');
    //   var myChart = echarts.init(chartDom);
    //   var option;
    //   var data = [
    //     { value: 20, name: '发电行业' },
    //     { value: 24, name: '石化行业' },
    //     { value: 21, name: '化工行业' },
    //     { value: 10, name: '建材行业' },
    //     { value: 10, name: '钢铁行业' },
    //     { value: 5, name: '有色行业' },
    //     { value: 5, name: '造纸行业' },
    //     { value: 3, name: '航空行业' },
    //     { value: 2, name: '其他行业' },
    //   ];
    //   option = {
    //     tooltip: {
    //       trigger: 'item',
    //     },
    //     legend: {
    //       right: 100,
    //       top: 25,
    //       icon: 'circle',
    //       itemHeight: 5,
    //       itemWidth: 5,
    //       orient: 'vertical',
    //       textStyle: {
    //         color: '#B4C0CC',
    //       },
    //       formatter: function (name) {
    //         return name;
    //       },
    //     },
    //     series: [
    //       {
    //         name: '',
    //         type: 'pie',
    //         radius: ['63%', '70%'],
    //         center: ['35%', '50%'],
    //         avoidLabelOverlap: false,
    //         itemStyle: {
    //           borderColor: '#051721',
    //           borderWidth: 2,
    //           color: function (colors) {
    //             var colorList = [
    //               '#00CCCC',
    //               '#16D816',
    //               '#12D5B5',
    //               '#FFC44D',
    //               '#5533FF',
    //               '#FF5A4D',
    //               '#4D8DFF',
    //               '#56D897',
    //               '#A84CD8',
    //             ];
    //             return colorList[colors.dataIndex];
    //           },
    //         },
    //         label: {
    //           show: false,
    //           position: 'center',
    //         },
    //         labelLine: {
    //           show: false,
    //         },
    //         data: data,
    //       },
    //       {
    //         name: '',
    //         type: 'pie',
    //         radius: ['40%', '60%'],
    //         center: ['35%', '50%'],
    //         avoidLabelOverlap: false,
    //         itemStyle: {
    //           borderColor: '#051721',
    //           borderWidth: 2,
    //           color: function (colors) {
    //             var colorList = [
    //               '#00CCCC70',
    //               '#16D81670',
    //               '#12D5B570',
    //               '#FFC44D70',
    //               '#5533FF70',
    //               '#FF5A4D70',
    //               '#4D8DFF70',
    //               '#56D89770',
    //               '#A84CD870',
    //             ];
    //             return colorList[colors.dataIndex];
    //           },
    //         },
    //         label: {
    //           show: false,
    //           position: 'center',
    //         },
    //         labelLine: {
    //           show: false,
    //         },
    //         data: data,
    //       },
    //     ],
    //   };
    //   option && myChart.setOption(option);
    // }
    // initCarbonPie();

    // 行业碳排放堆叠图
    function initCarbonStackBar() {
      var chartDom = document.getElementById('carbon-stackBar');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: 10,
          left: 10,
          itemHeight: 10,
          textStyle: {
            color: '#B4C0CC'
          }
        },
        grid: {
          bottom: 0,
          left: 10,
          top: 40,
          right: 15,
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#B4C0CC'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#ffffff10'
            }
          }
        },
        yAxis: {
          type: 'category',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#B4C0CC'
          },
          data: ['其他行业', '航空行业', '造纸行业', '有色行业', '钢铁行业', '建材行业', '化工行业', '石化行业', '发电行业']
        },
        series: [
          {
            name: '碳排放总量（亿吨）',
            type: 'bar',
            stack: 'total',
            color: {
              type: 'linear',
              x: 1,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: '#12D5B5'
                },
                {
                  offset: 0.6,
                  color: '#12D5B575'
                },
                {
                  offset: 1,
                  color: '#12D5B510'
                }
              ]
            },
            barWidth: 10,
            itemStyle: {
              barBorderRadius: [0, 10, 10, 0]
            },
            data: [4.1, 5.1, 5.1, 5.1, 6, 7.5, 9.7, 11.5, 14.2]
          },
          {
            name: '碳排放存量（亿吨）',
            type: 'bar',
            stack: 'total',
            color: {
              type: 'linear',
              x: 1,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: '#FF5C00'
                },
                {
                  offset: 0.6,
                  color: '#FF5C0075'
                },
                {
                  offset: 1,
                  color: '#FF5C0010'
                }
              ]
            },
            itemStyle: {
              barBorderRadius: [0, 10, 10, 0]
            },
            data: [1, 0.7, 0.7, 1.3, 1.7, 1.5, 1.1, 1.5, 2.3]
          }
        ]
      };
      option && myChart.setOption(option);
    }
    initCarbonStackBar();

    // 碳中和趋势
    function initCarbonLine() {
      var chartDom = document.getElementById('carbon-line');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        color: ['#00AAFF', '#41E4BB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              type: 'dotted',
              color: '#FFFFFF20',
            },
          },
          formatter: function (params) {
            let tip = '<div style="font-size:14px;">';
            params.forEach((item, index) => {
              if (index === 0) {
                tip += `<span>${item.name}</span> <br>
                  ${item.marker}    ${item.seriesName}：${item.value}  <br>`;
              } else {
                tip += `${item.marker}    ${item.seriesName}：${item.value}  <br>`;
              }
            });
            tip += `</div>`;
            return tip;
          },
        },
        grid: {
          bottom: 5,
          left: 15,
          top: 45,
          right: 15,
          containLabel: true,
        },
        legend: {
          data: ['碳源', '碳汇'],
          top: 10,
          left: 10,
          textStyle: {
            color: '#B4C0CC',
            fontSize: 14,
          },
          itemHeight: 8,
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: [
            '2020',
            '2025',
            '2030',
            '2035',
            '2040',
            '2045',
            '2050',
            '2055',
            '2060',
          ],
          axisLabel: {
            textStyle: {
              fontSize: 12,
              color: '#FFFFFF',
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#FFFFFF',
              width: 1,
            },
          },
          axisTick: {
            show: true,
          },
        },
        yAxis: {
          nameTextStyle: {
            color: '#FFFFFF80',
            padding: [0, 0, 0, -35],
          },
          type: 'value',
          axisLabel: {
            color: '#FFFFFF80',
          },
          splitLine: {
            lineStyle: {
              type: 'dotted',
              color: '#FFFFFF20',
            },
            show: true,
          },
          axisLine: {
            show: false,
          },
        },
        series: [
          {
            name: '碳源',
            data: [76.7, 83, 89.7, 82.5, 71.3, 55.8, 43.7, 30.9, 15.8],
            type: 'line',
            symbolSize: 5,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#00AAFF',
                  },
                  {
                    offset: 0.7,
                    color: '#00AAFF20',
                  },
                  {
                    offset: 0.9,
                    color: '#00AAFF10',
                  },
                  {
                    offset: 1,
                    color: '#00AAFF00',
                  },
                ]),
              },
            },
          },
          {
            name: '碳汇',
            data: [2, 3, 5, 6, 7.5, 8, 10, 13, 15.8],
            type: 'line',
            symbolSize: 5,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#41E4BB',
                  },
                  {
                    offset: 0.7,
                    color: '#41E4BB20',
                  },
                  {
                    offset: 0.9,
                    color: '#41E4BB10',
                  },
                  {
                    offset: 1,
                    color: '#41E4BB00',
                  },
                ]),
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
    }
    initCarbonLine();

    // 碳中和趋势
    function initValueLine() {
      var chartDom = document.getElementById('value-line');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        color: ['#00AAFF', '#41E4BB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              type: 'dotted',
              color: '#FFFFFF20',
            },
          },
          formatter: function (params) {
            let tip = '<div style="font-size:14px;">';
            params.forEach((item, index) => {
              if (index === 0) {
                tip += `<span>${item.name}</span> <br>
                  ${item.marker}    ${item.seriesName}：${item.value}  <br>`;
              } else {
                tip += `${item.marker}    ${item.seriesName}：${item.value}  <br>`;
              }
            });
            tip += `</div>`;
            return tip;
          },
        },
        grid: {
          bottom: 5,
          left: 15,
          top: 45,
          right: 15,
          containLabel: true,
        },
        legend: {
          data: ['经济总值（万亿）', '碳排放（亿吨）'],
          top: 10,
          left: 10,
          textStyle: {
            color: '#B4C0CC',
            fontSize: 14,
          },
          itemHeight: 8,
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: [
            '2020',
            '2025',
            '2030',
            '2035',
            '2040',
            '2045',
            '2050',
            '2055',
            '2060',
          ],
          axisLabel: {
            textStyle: {
              fontSize: 12,
              color: '#FFFFFF',
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#FFFFFF',
              width: 1,
            },
          },
          axisTick: {
            show: true,
          },
        },
        yAxis: {
          nameTextStyle: {
            color: '#FFFFFF80',
            padding: [0, 0, 0, -35],
          },
          type: 'value',
          axisLabel: {
            color: '#FFFFFF80',
          },
          splitLine: {
            lineStyle: {
              type: 'dotted',
              color: '#FFFFFF20',
            },
            show: true,
          },
          axisLine: {
            show: false,
          },
        },
        series: [
          {
            name: '经济总值（万亿）',
            data: [175, 181, 210, 223, 237, 261, 267, 275, 280],
            type: 'line',
            symbolSize: 5,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#00AAFF',
                  },
                  {
                    offset: 0.7,
                    color: '#00AAFF20',
                  },
                  {
                    offset: 0.9,
                    color: '#00AAFF10',
                  },
                  {
                    offset: 1,
                    color: '#00AAFF00',
                  },
                ]),
              },
            },
          },
          {
            name: '碳排放（亿吨）',
            data: [103.8, 130.8, 135.8, 159, 165, 171, 201, 216, 227],
            type: 'line',
            symbolSize: 5,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#41E4BB',
                  },
                  {
                    offset: 0.7,
                    color: '#41E4BB20',
                  },
                  {
                    offset: 0.9,
                    color: '#41E4BB10',
                  },
                  {
                    offset: 1,
                    color: '#41E4BB00',
                  },
                ]),
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
    }
    initValueLine();

    // 各省碳排放
    function initCarbonProvince() {
      var chartDom = document.getElementById('carbon-province');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              type: 'dotted',
              color: '#FFFFFF20',
            },
          },
          formatter: function (params) {
            const color = ['#0066CC', '#FFD15C'];
            const unit = ['亿吨', '吨/万元'];
            let tip = '<div style="font-size:14px;">';
            params.forEach((item, index) => {
              if (index === 0) {
                tip += `<span>${item.name}</span> <br>
                <span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[index]};\"></span>
                    ${item.seriesName}：${item.value} ${unit[index]}  <br>`;
              } else {
                tip += `<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[index]};\"></span>
                    ${item.seriesName}：${item.value} ${unit[index]}  <br>`;
              }
            });
            tip += `</div>`;
            return tip;
          },
        },
        grid: {
          bottom: 5,
          left: 5,
          top: 75,
          right: 15,
          containLabel: true,
        },
        legend: {
          data: ['碳排放', '碳排放强度'],
          top: 10,
          left: 10,
          textStyle: {
            color: '#B4C0CC',
            fontSize: 14,
          },
          itemHeight: 14,
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: [
            '山东省',
            '河北省',
            '江苏省',
            '内蒙古',
            '河南省',
            '广东省',
            '辽宁省',
            '山西省',
          ],
          axisLabel: {
            textStyle: {
              fontSize: 12,
              color: '#FFFFFF',
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#FFFFFF',
              width: 1,
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            name: '单位：亿吨',
            nameTextStyle: {
              color: '#FFFFFF80',
              padding: [0, 0, 0, 10],
            },
            type: 'value',
            axisLabel: {
              color: '#FFFFFF80',
            },
            max: 10,
            min: 0,
            interval: 1,
            splitLine: {
              lineStyle: {
                type: 'dotted',
                color: '#FFFFFF20',
              },
              show: true,
            },
            axisLine: {
              show: false,
            },
          },
          {
            name: '单位：吨/万元',
            nameTextStyle: {
              color: '#FFFFFF80',
              padding: [0, 0, 0, -35],
            },
            type: 'value',
            axisLabel: {
              color: '#FFFFFF80',
            },
            max: 2.5,
            min: 0,
            interval: 0.25,
            splitLine: {
              lineStyle: {
                type: 'dotted',
                color: '#FFFFFF20',
              },
              show: true,
            },
            axisLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: '碳排放',
            data: [9.3, 8.1, 7.7, 6.5, 6, 5.8, 5.4, 5.2],
            type: 'bar',
            barWidth: 25,
            color: {
              type: 'linear',
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: '#29B1CC', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#0066CC', // 100% 处的颜色
                },
              ],
            },
          },
          {
            name: '碳排放强度',
            data: [1.09, 1.75, 0.86, 1.72, 1.15, 1.05, 1.09, 1.66],
            type: 'line',
            symbolSize: 5,
            symbol: 'circle',
            color: '#FFD15C',
            yAxisIndex: 1,
          },
        ],
      };
      option && myChart.setOption(option);
    }
    initCarbonProvince();

    // 返回按钮
    const backButton = document.querySelector('.back-button');
    backButton.onclick = function () {
      // window.location.href = 'http://cx.dev.irs101.cn/dev/regional-node/rdca#/';
      window.location.href = 'http://localhost:8080/';
    };

    // const fullScreen = document.querySelector('.full-screen');
    // fullScreen.onclick = function fullScreen() {
    //   if (document.documentElement.RequestFullScreen) {
    //     document.documentElement.RequestFullScreen();
    //   }
    //   //兼容火狐
    //   console.log(document.documentElement.mozRequestFullScreen);
    //   if (document.documentElement.mozRequestFullScreen) {
    //     document.documentElement.mozRequestFullScreen();
    //   }
    //   //兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
    //   if (document.documentElement.webkitRequestFullScreen) {
    //     document.documentElement.webkitRequestFullScreen();
    //   }
    //   //兼容IE,只能写msRequestFullscreen
    //   if (document.documentElement.msRequestFullscreen) {
    //     document.documentElement.msRequestFullscreen();
    //   }
    //   noFullScreen();
    // };
    // function noFullScreen() {
    //   if (document.exitFullScreen) {
    //     document.exitFullscreen();
    //   }
    //   //兼容火狐
    //   console.log(document.mozExitFullScreen);
    //   if (document.mozCancelFullScreen) {
    //     document.mozCancelFullScreen();
    //   }
    //   //兼容谷歌等
    //   if (document.webkitExitFullscreen) {
    //     document.webkitExitFullscreen();
    //   }
    //   //兼容IE
    //   if (document.msExitFullscreen) {
    //     document.msExitFullscreen();
    //   }
    // }

    // const goBack = document.querySelector('.go-back');
    // goBack.onclick = function () {
    //   window.location.href = 'http://cx.dev.irs101.cn/dev/regional-node/rdca#/';
    // };
  </script>
</body>

</html>